<script setup>
defineProps(['activeList'])
</script>

<template>
  <view class="moving-goods">
	  <view class="moving-l">
		  <navigator class="good-item" :url="`/pagesGoods/list/list?category2Id=${activeList[0].category2Id}`">
		  	<image :src="activeList[0].imageUrl" mode="scaleToFill" class="img"></image>
		  </navigator>
	  </view>
	  <view class="moving-r">
		  <navigator class="good-item" :url="`/pagesGoods/list/list?category2Id=${activeList[1].category2Id}`">
		  	<image :src="activeList[1].imageUrl" mode="scaleToFill" class="img"></image>
		  </navigator>
		  <navigator class="good-item" :url="`/pagesGoods/list/list?category2Id=${activeList[2].category2Id}`">
		  	<image :src="activeList[2].imageUrl" mode="scaleToFill" class="img"></image>
		  </navigator>
	  </view>
  </view>
</template>

<style lang="scss" scoped>
.moving-goods{
	margin-top: 16rpx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background: #fff;
	.moving-l{
		flex:1;
		.good-item{
			box-sizing: border-box;
			padding: 12rpx;
			height: 480rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		} 
	}
	.moving-r{
		flex:1;
		display: flex;
		flex-direction: column;
		padding-right: 12rpx;
		.good-item{
			box-sizing: border-box;
			height: 240rpx;
			
			.img{
				width: 100%;
				height: 100%;
			}
		} 
		.good-item:nth-child(1){
			padding-top: 12rpx;
			padding-bottom: 6rpx;
		}
		.good-item:nth-child(2){
			padding-top: 6rpx;
			padding-bottom: 12rpx;		
		}
	}
}
</style>
